<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="width *= 1.1">放大10%</button>
			<button @click="width *= 0.9">缩小10%</button>
			<br>
			<img :width="width" src="img/t03.jpg" alt="示例图片" />
			<br>
			{{ msg }}
			<input v-model="msg" type="text" placeholder="输入文字">
			<hr>
			{{ a }}是
			<span>{{ a % 2 == 0 ? '偶数' : '奇数' }}</span>
			<hr>
			姓名：<input v-model="student.name" type="text" placeholder="请输入姓名">
			年龄：<input v-model="student.age" type="number" placeholder="请输入年龄">
			<br>
			姓名: {{ student.name }} 年龄: {{ student.age }}
			<p>
				{{ student.name }} 是
				<span>{{ student.age >= 18 ? '成年人' : '未成年人' }}</span>
			</p>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						width: 200,
						msg: '',
						a: 7,
						student: {
							name: '',
							age: null
						}
					};
				},
				methods: {
					zoomIn() {
						this.width *= 1.1;
					},
					zoomOut() {
						this.width *= 0.9;
					}
				}
			}).mount('#app');
		</script>
	</body>
</html>
